<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="core" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="secured" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<secured:authorize ifAnyGranted="ROLE_CREAR_CLIENTE">
<head>
	
</head>
<body>
	<div class="contenedor grande">
		<form:form commandName="modeloCliente" action="cliente.do" method="post" acceptCharset="UTF-8" autocomplete="off">
			<form:hidden path="accion" />
			
			<form:errors cssClass="mensaje-error-campo" />
			
			<!-- BOTONES -->
			<div class="botones">
				<button type="button" onclick="javascript:cancelar();" class="derecha"><spring:message code="etiqueta.cancelar" text="Cancelar" /></button>
				<button type="button" onclick="javascript:primera();"><spring:message code="etiqueta.informacion" text="Información" /></button>
				<button type="button" onclick="javascript:segunda();"><spring:message code="etiqueta.cuentas" text="Cuentas" /></button>
			</div>
				
			<!-- PAGINAS -->
			<div class="paginas">
				
				<div id="primera" class="pagina">
					<h2><spring:message code="etiqueta.datosCliente" text="Datos del cliente." /></h2>
		
					<div class="campo horizontal">
		      			<form:label path="tipo"><spring:message code="etiqueta.tipoCliente" text="Tipo de cliente" />
		      				<span class="requerido"><spring:message code="etiqueta.requerido" text="(Requerido)" /></span>
		      			</form:label>
		      			
		      			<div id="radio">
		      				<input type="radio" id="radio1" name="tipo" value="PERSONA" <core:if test="${modeloCliente.tipo == 'PERSONA'}"> checked="checked" </core:if> onclick="javascript:tipoCliente();" /><label for="radio1"><spring:message code="etiqueta.tipoCliente.PERSONA" text="Persona" /></label>
		      				<input type="radio" id="radio2" name="tipo" value="EMPRESA" <core:if test="${modeloCliente.tipo == 'EMPRESA'}"> checked="checked" </core:if> onclick="javascript:tipoCliente();" /><label for="radio2"><spring:message code="etiqueta.tipoCliente.EMPRESA" text="Empresa" /></label>
		      			</div>
						<form:errors cssClass="mensaje-error-campo" path="tipo" />
		      		</div>
		      		<div class="campo horizontal">
		      			<form:label path="nombre"><spring:message code="etiqueta.nombre" text="Nombre" />
		      				<span class="requerido"><spring:message code="etiqueta.requerido" text="(Requerido)" /></span>
		      			</form:label>
						
						<spring:message code="etiqueta.nombre" text="Nombre" var="placeholder" />
						<form:input path="nombre" maxlength="25" tabindex="2" placeholder="${placeholder}" cssClass="solo-texto" cssErrorClass="solo-texto campo-error" />
						<form:errors cssClass="mensaje-error-campo" path="nombre" />
		      		</div>
		      		<div class="separador">
						&nbsp;
					</div>
		      		
					<div class="persona" style="display: none;">
						<!-- PRIMER FILA -->
						<div class="campo horizontal">
			      			<form:label path="apellido"><spring:message code="etiqueta.apellido" text="Apellido" />
			      				<span class="requerido"><spring:message code="etiqueta.requerido" text="(Requerido)" /></span>
			      			</form:label>
							
							<spring:message code="etiqueta.apellido" text="Apellido" var="placeholder" />
							<form:input path="apellido" maxlength="25" tabindex="3" placeholder="${placeholder}" cssClass="solo-texto" cssErrorClass="solo-texto campo-error" />
							<form:errors cssClass="mensaje-error-campo" path="apellido" />
		      			</div>
						<div class="campo horizontal">
			      			<form:label path="correoElectronico"><spring:message code="etiqueta.correoElectronico" text="Correo electrónico" />
								<span class="requerido"><spring:message code="etiqueta.requerido" text="(Requerido)" /></span>
			      			</form:label>
							
							<spring:message code="etiqueta.correoElectronico" text="Correo electrónico" var="placeholder" />
							<spring:message code="hint.correoElectronicoComoUsuario" text="Esta dirección de correo electrónico será el usuario para ingresar al sistema." var="title" />
							<form:input path="correoElectronico" maxlength="50" tabindex="4" placeholder="${placeholder}" title="${title}" cssClass="solo-email" cssErrorClass="solo-email campo-error" />
							<form:errors cssClass="mensaje-error-campo" path="correoElectronico" />
			      		</div>
			      		<div class="separador" style="margin: 0;">
							&nbsp;
						</div>
			      		
			      		<!-- SEGUNDA FILA -->
			      		<div class="campo horizontal">
			      			<form:label path="segundoNombre"><spring:message code="etiqueta.segundoNombre" text="Segundo nombre" /></form:label>
							
							<spring:message code="etiqueta.segundoNombre" text="Segundo nombre" var="placeholder" />
							<form:input path="segundoNombre" maxlength="25" tabindex="5" placeholder="${placeholder}" cssClass="solo-texto" cssErrorClass="solo-texto campo-error" />
							<form:errors cssClass="mensaje-error-campo" path="segundoNombre" />
			      		</div>
						<div class="campo horizontal">
			      			<form:label path="telefono"><spring:message code="etiqueta.telefonoConFormato" text="Teléfono (en formato internacional)" /></form:label>
							
							<spring:message code="etiqueta.telefono" text="Teléfono" var="placeholder" />
							<spring:message code="hint.telefonoFijo" text="Por favor, ingrese un número de teléfono fijo." var="title" />
							<form:input path="telefono" maxlength="25" tabindex="6" placeholder="${placeholder}" title="${title}" cssClass="solo-tel" cssErrorClass="solo-tel campo-error" />
							<form:errors cssClass="mensaje-error-campo" path="telefono" />
			      		</div>
			      		<div class="campo horizontal">
			      			<form:label path="celular"><spring:message code="etiqueta.celularConFormato" text="Celular (en formato internacional)" /></form:label>
							
							<spring:message code="etiqueta.celular" text="Celular" var="placeholder" />
							<spring:message code="hint.telefonoCelular" text="Por favor, ingrese un número de teléfono móvil." var="title" />
							<form:input path="celular" maxlength="25" tabindex="7" placeholder="${placeholder}" title="${title}" cssClass="solo-tel" cssErrorClass="solo-tel campo-error" />
							<form:errors cssClass="mensaje-error-campo" path="celular" />
			      		</div>
					</div>
					
					<div class="empresa" style="display: none;">
						
						<!-- PRIMER FILA -->
						<div class="campo horizontal">
			      			<form:label path="razonSocial"><spring:message code="etiqueta.razonSocial" text="Razón Social" />
			      				<span class="requerido"><spring:message code="etiqueta.requerido" text="(Requerido)" /></span>
			      			</form:label>
							
							<spring:message code="etiqueta.razonSocial" text="Razón Social" var="placeholder" />
							<form:input path="razonSocial" maxlength="250" tabindex="3" placeholder="${placeholder}" cssClass="solo-texto" cssErrorClass="solo-texto campo-error" />
							<form:errors cssClass="mensaje-error-campo" path="razonSocial" />
			      		</div>
			      		<div class="campo horizontal">
			      			<form:label path="rut"><spring:message code="etiqueta.rut" text="RUT" />
								<span class="requerido"><spring:message code="etiqueta.requerido" text="(Requerido)" /></span>
			      			</form:label>
							
							<spring:message code="etiqueta.rut" text="RUT" var="placeholder" />
							<spring:message code="hint.rut" text="Ingrese el número de registro único tributario de la empresa." var="title" />
							<form:input path="rut" maxlength="25" tabindex="4" placeholder="${placeholder}" title="${title}" cssClass="solo-numero" cssErrorClass="solo-numero campo-error" />
							<form:errors cssClass="mensaje-error-campo" path="rut" />
			      		</div>
			      		<div class="campo horizontal">
			      			<form:label path="url"><spring:message code="etiqueta.url" text="URL" /></form:label>
							
							<spring:message code="etiqueta.url" text="URL" var="placeholder" />
							<form:input path="url" maxlength="250" tabindex="5" placeholder="${placeholder}" cssErrorClass="campo-error" />
							<form:errors cssClass="mensaje-error-campo" path="url" />
			      		</div>
					</div>
					<div class="separador">
						&nbsp;
					</div>
					
					<div class="campo comentario horizontal">
		      			<form:label path="comentarios"><spring:message code="etiqueta.comentarios" text="Comentarios" /></form:label>
						
						<form:textarea path="comentarios" maxlength="500" tabindex="8" />				
		      		</div>
		      		<div class="separador">
						&nbsp;
					</div>
															
				</div>
				<div id="segunda" class="pagina">
				
					<div class="separador">
						&nbsp;
					</div>
					
					<!-- BOTONES -->
		      		<button type="submit" tabindex="18"><spring:message code="etiqueta.crear" text="Crear" /></button>
		      							
				</div>
			</div>
		</form:form>
	</div>
	
	<!-- JAVASCRIPT -->
	<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery("#radio").buttonset();

			<core:if test="${!empty modeloCliente.tipo}"> 
				tipoCliente();
			</core:if>
			
			jQuery("form[id=modeloCliente]").validity(function() {
				var tipo = jQuery("input:checked").val();
				
				jQuery("input:radio:last").assert(
					function(){
						return tipo === "PERSONA" || tipo === "EMPRESA"; 
					}, '<spring:message code="mensaje.tipoClienteRequerido" text="Por favor, seleccion un tipo de cliente." />');

				//Requerido. Entre 2 y 25 caracteres (inclusive)
				jQuery("#nombre")
					.require('<spring:message code="mensaje.nombreRequerido" text="Por favor, ingrese el nombre." />')
					.minLength(2)
					.maxLength(25);

				switch(tipo) {
					case 'PERSONA':
						
						//Requerido. Entre 2 y 25 caracteres (inclusive)
			        	jQuery("#apellido")
				        	.require('<spring:message code="mensaje.apellidoRequerido" text="Por favor, ingrese el apellido." />')
							.minLength(2)
							.maxLength(25);

						//Debe ser un correo electrónico válido
						jQuery("#correoElectronico")
							.require('<spring:message code="mensaje.correoElectronicoRequerido" text="Por favor, ingrese un correo electrónico." />')
							.match('email');

						//Debe ser un número de teléfono fijo válido
						jQuery('#telefono')
							.assert(function(){
								var valido = true;
								var telefono = jQuery.trim(jQuery('#telefono').val());
								if(telefono.length > 0) {
									var pais = jQuery.trim(countryForE164Number(telefono));
									if(pais.length == 0) {
										pais = region;
									}
									telefono = formatE164(pais, telefono);
									valido = isValidNumber(telefono);
									if(valido) {
										jQuery('#telefono').val(telefono);
									}
								}
								return valido;
							}, '<spring:message code="mensaje.telefonoFijoInvalido" text="Por favor, ingrese un número de teléfono fijo válido." />');

						//Debe ser un número de teléfono fijo válido
						$('#celular')
							.assert(function(){
								var valido = true;
								var celular = jQuery.trim(jQuery('#celular').val());
								if(celular.length > 0) {
									var pais = jQuery.trim(countryForE164Number(celular));
									if(pais.length == 0) {
										pais = region;
									}
									celular = formatE164(pais, celular);
									valido = isValidNumber(celular);
									if(valido) {
										jQuery('#celular').val(celular);
									}
								}
								return valido;
							}, '<spring:message code="mensaje.telefonoCelularInvalido" text="Por favor, ingrese un número de teléfono móvil válido." />');
						
						break;
					case 'EMPRESA':

						//Requerido. Entre 2 y 25 caracteres (inclusive)
						jQuery("#razonSocial")
							.require('<spring:message code="mensaje.razonSocialRequerida" text="Por favor, ingrese la razón social." />')
							.minLength(2)
							.maxLength(25);

						//Requerido. Entre 2 y 25 caracteres (inclusive)
						jQuery("#rut")
							.require('<spring:message code="mensaje.numeroRutRequerido" text="Por favor, ingrese el número de registro único tributario de la empresa." />')
							.minLength(20)
							.maxLength(25);

						//Requerido. Entre 2 y 25 caracteres (inclusive)
						jQuery("#url")
							.match('url')
							.maxLength(250);
						
						break;
				}
			});
		});

		function tipoCliente() {
			var tipo = jQuery('input:checked').val();
			switch(tipo) {
				case 'PERSONA':
					jQuery('.empresa').slideUp(1000);
					jQuery('.persona').slideDown(1000);
					break;
				case 'EMPRESA':
					jQuery('.persona').slideUp(1000);
					jQuery('.empresa').slideDown(1000);
					break;
				default:
					jQuery('.persona').slideUp(1000);
					jQuery('.empresa').slideUp(1000);
					break;
			}
		}
	</script>
</body>
</secured:authorize>